<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <school :getSchoolName="getSchoolName"></school>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@或v-on) -->
    <!-- <student @atguigu="getStudentName"></student> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法，使用ref -->
    <student ref="student"></student>
  </div>
</template>

<script>
import school from './components/school.vue'
import student from './components/student.vue'
export default {
  name: 'App',
  components: {
    student,
    school
  },
  data() {
    return {
      msg: '你好啊'
    }
  },
  mounted() {
    this.$refs.student.$on('atguigu', this.getStudentName)
    //触发一次
    // this.$refs.student.$once('atguigu', this.getStudentName)
  },
  methods: {
    getSchoolName(name) {
      console.log('APP收到了学校名：', name);
    },
    getStudentName(name) {
      console.log('APP收到了学生名:', name);
    }
  }
}
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>

